<template>
  <div class="device-info-container">
    <div class="banner">
      <!--<img src="/images/banner.png" alt="">-->
      <img  :src="host+info.cover_url" alt="">
      <div class="title"></div>
    </div>

    <div class="main-box">
      <ul>
        <li>
          <div class="title">使用单位</div>
          <div class="des">{{info.use_company}}</div>
        </li>
        <li>
          <div class="title">灭火器规格型号</div>
          <div class="des">{{info.spec}}</div>
        </li>
        <li>
          <div class="title">生产单位</div>
          <div class="des">{{info.prod_company}}</div>
        </li>
        <li>
          <div class="title">生产日期</div>
          <div class="des">{{info.prod_at}}</div>
        </li>
        <li>
          <div class="title">维修单位</div>
          <div class="des">{{info.repair_company}}</div>
        </li>
        <li>
          <div class="title">维修日期</div>
          <div class="des">{{info.repair_at}}</div>
        </li>
        <li>
          <div class="title">灭火剂主要成分及含量</div>
          <div class="des">{{info.content}}</div>
        </li>
        <li>
          <div class="title">筒体水压试验</div>
          <div class="des">{{info.test}}</div>
        </li>
        <li>
          <div class="title">检验员</div>
          <div class="des">{{info.tester}}</div>
        </li>
        <li>
          <div class="title">下次维修时间</div>
          <div class="des">{{info.next_repair_at}}</div>
        </li>
        <li>
          <div class="title">状态</div>
          <div class="des ok" v-if="info.status=='1'">{{info.status_name}}</div>
          <div class="des cancel" v-else>{{info.status_name}}</div>
        </li>
      </ul>

    </div>
    <!--<div class="footer">
      <div class="qrcode"><img src="/images/qrcode.jpg" alt=""></div>
      <div class="company-box">
        <div class="title">山东消防协会</div>
        <ul>
          <li>地址：济南高新区凤飞路1699号逸家大厦10楼东侧</li>
          <li>电话：0531-88897896</li>
        </ul>
      </div>
    </div>-->
  </div>
</template>

<script>

  import { myGet } from '@/utils/myUtils'
  const urlArticleLst = '/api/web/device/detail'
  export default {
  name: 'deviceInfo',
    data() {
      return {
        host:process.env.VUE_APP_HOST,
        loading:false,
        id:1,
        info:{}
      };
    },
    created(){

      this.id=this.$route.query.id;
      myGet("http://fxrepairinfo.techyx.cn/api/web/device/detail",{id:this.id}).then(res=>{
        this.listLoading = false
        if(res.status){
            this.info=res.data.records[0];
            console.log(this.info)
        }
      })
    },
    methods:{



    },
    computed: {
      message() {
        return 'The webmaster said that you can not enter this page...'
      }
    }
}
</script>

<style lang="scss" scoped>
  /*@media screen and (max-width:750px) {*/

  /*}*/
  /*html {*/
  /*  font-size: 75px !important;*/
  /*}*/
  .device-info-container {
    // background: #ddd;
    // font-family: 'SourceHanSansCN-Regular';
    font-family: "Microsoft YaHei", 微软雅黑;
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    min-height: 100vh;
    width: 100%;

    .banner {
      width: 100%;

      position: relative;

      img {
        width: 100%;
        object-fit: contain;
      }

      .title {
        position: absolute;
        top: 15px;
        left: 0px;
        width: 100%;
        text-align: center;
        color: #ffffff;
        font-size: 15px;
      }

    }

    .main-box {
      padding: 15px 7.5px 0px 7.5px;

      ul {
        margin:0px 0px;
        padding:0px 0px;
        li {
          font-size: 13px;
          display: flex;
          width: 100%;
          justify-content: space-between;
          line-height: 37.5px;
          border-bottom: 1px dotted #ddd;

          .title {
            color: #aaa;
          }

          .des {
            color: #000;


            &.ok {
              color: green;
              font-weight: bold;
            }

            &.cancel {
              color: red;
              font-weight: bold;
            }
          }
        }
      }


    }

    .footer {
      display: flex;
      width: 100%;
      justify-content: flex-start;
      padding: 37.5px 15px;
      background: #ddd;
      align-items: center;
      box-sizing: border-box;

      .qrcode {
        width: 112px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .company-box {
        margin-left: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .title {
          font-size: 18.75px;
        }

        ul {
          margin-top: 5.25px;
          list-style: none;
          padding:0px 0px;
          margin-block-end:0px;
          li {
            font-size:12px;
            width: 100%;
          }
        }
      }
    }



  }
</style>
